<template>
    <div>
        <div v-if="!data" slot="empty" class="emptyBg">
            <el-empty :image-size="200"></el-empty>
        </div>
        <MyEcharts v-else :option="option" @emitIdx="change" />
    </div>
</template>
<script>
import Bus from "@/utils/bus.js";
export default {
    components: {
        MyEcharts: () => import("@/components/myEcharts/index.vue")
    },
    data() {
        return {
            option: null,
            firstData: [],
            option: null
        };
    },
    props: ["data"],
    watch: {
        data() {
            this.init();
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            if (!this.data) return;
            let arr = [];
            this.firstData = this.uniqueById(this.data.map(v => v.level1));
            this.firstData.forEach(v => {
                let n = 0;
                this.data.forEach(m => {
                    if (v.id == m.level1.id) {
                        n += parseInt(m.num);
                    }
                });
                arr.push(n);
            });
            this.initEcharts(this.firstData, arr);
        },
        initEcharts(data, arr) {
            // 饼图
            data.forEach((v, i) => {
                this.$set(v, "value", arr[i]);
            });
            this.option = {
                tooltip: {},
                legend: {
                    orient: "vertical",
                    right: "0%",
                    top: "30%",
                    textStyle: { color: "#ffffff" }
                },
                series: [
                    {
                        type: "pie",
                        radius: ["30%", "70%"],
                        label: {
                            show: true,
                             formatter: "\n{b} {c}  ({d}%)\n", // b代表名称，c代表对应值，d代表百分比
                        },
                        data: data
                    }
                ],
                color: ["#3994e2", "#377fe2", "#3e6de4", "#3b57e5", "#753fe2"],
                animationDuration: 1000
            };
        },
        change(idx) {
            Bus.$emit("changeIdx", idx);
        }
    }
};
</script>
<style scoped lang="scss">
</style>